<template>
  <n-layout
    embedded
    content-style="padding: 10px;"
  >
    <!--  {{taskBoardList}}-->
    <n-card
      :title="'📖  计时任务显示'"
      embedded
      bordered
    >
      <n-space
        vertical
        align="center"
      >
        <n-tag
          v-if="!taskBoardList.recordFlag"
          type="success"
          >未有任务计时</n-tag
        >
        <n-tag
          v-if="taskBoardList.recordFlag"
          type="error"
          >当前计时任务：{{ name }}</n-tag
        >
        <n-space>
          <n-gradient-text
            :size="20"
            type="error"
            v-if="taskBoardList.recordFlag"
          >
            开始计时时间：
          </n-gradient-text>
          <n-date-picker
            v-if="taskBoardList.recordFlag"
            v-model:value="taskBoardList.recordBeginTime"
            type="datetime"
          />
        </n-space>
        <n-gradient-text
          :size="20"
          type="info"
          v-if="!taskBoardList.recordFlag"
          >暂无计时任务</n-gradient-text
        >
        <n-gradient-text
          :size="20"
          type="error"
          v-if="taskBoardList.recordFlag"
        >
          目前已计时：{{ count }}
        </n-gradient-text>
      </n-space>
    </n-card>
    <n-space justify="center">
      <n-button
        :disabled="!taskBoardList.recordFlag"
        @click="endRecord()"
      >
        结束计时</n-button
      >
      <n-button
        :disabled="!taskBoardList.recordFlag"
        @click="cancelRecord()"
      >
        取消计时</n-button
      >
    </n-space>
  </n-layout>
  <TaskLogEditDrawer v-model="editSettings"></TaskLogEditDrawer>
</template>

<script lang="ts" setup>
// 全局数据
import TaskLogEditDrawer from "@/components/operation/taskLogList/taskLogListBtn/TaskLogEditDrawer.vue";
import { TaskBoardList } from "@model/TaskBoardList";
import { TaskLogData } from "@model/TaskLogMap";
import { SurfaceSetting } from "@model/surfaceSetting";
import UseSurfaceSetting from "@pinias/UseSurfaceSetting";
import pinia from "@pinias/pinia";
import { changeTimeUnit } from "@utils/DateUtils";
import { useMessage } from "naive-ui";
import { onMounted, reactive, ref, watch } from "vue";

const { getSurfaceSetting } = UseSurfaceSetting(pinia);
const surfaceSetting: SurfaceSetting = getSurfaceSetting();
// const { getCacheTaskLogMap } = UseCacheTaskLog(pinia);
// const cacheTaskLogMap = getCacheTaskLogMap();
const taskBoardList = surfaceSetting.taskBoardList;
// console.log(cacheTaskLogMap);
// 当前页面数据
const name = ref<string>("");
const editSettings = reactive<{
  toEdit: boolean;
  toDelete: boolean;
  toDealRowId: string | undefined;
  toRecord: boolean;
}>({
  toEdit: false,
  toDelete: false,
  toDealRowId: undefined,
  toRecord: true,
});
const getTaskName = async () => {
  let showName = "";
  if (taskBoardList.recordFlag) {
    const oldFatherId = await TaskLogData.getFatherId(taskBoardList.recordType, taskBoardList.recordTaskId);
    // console.log(oldFatherId,"+++++++++++++++++++++++")
    showName =
      (oldFatherId[1]?.name.length > 0 ? oldFatherId[0].name : "") +
      (oldFatherId[1].name ? "-" + oldFatherId[1]?.name : "") +
      (oldFatherId[2]?.name ? "-" + oldFatherId[2]?.name : "");
    // if (taskBoardList.recordType === 1) {
    //   const taskData = taskList.getTaskDataById(taskBoardList.recordTaskId);
    //   // console.log("getTaskName",taskData?.name)
    //   if (taskData !== undefined) showName = taskData.name;
    //   // console.log(name.value)
    // }
    // if (taskBoardList.recordType === 2) {
    //   const timeManage = timeManageList.getTimeManageById(taskBoardList.recordTaskId);
    //   if (timeManage !== undefined) {
    //     showName += timeManage.desc;
    //   }
    // }
  }
  name.value = showName;
};
onMounted(getTaskName);
watch(surfaceSetting.taskBoardList, getTaskName);
const message = useMessage();
const endRecord = async () => {
  if (TaskBoardList.endRecord(surfaceSetting.taskBoardList)) {
    editSettings.toEdit = true;
    // message.success("计时完成");
  } else message.error("结束计时失败");
};
const cancelRecord = () => {
  if (TaskBoardList.endRecord(surfaceSetting.taskBoardList)) {
    message.success("取消计时成功");
  } else message.error("取消计时失败");
};
// 计时
const count = ref<string>("");
function foo() {
  if (taskBoardList.recordFlag) {
    count.value = changeTimeUnit(new Date().getTime() - taskBoardList.recordBeginTime);
    if (count.value.length === 0) count.value = "0分钟";
    // console.log(count.value)
  }
}
setInterval(foo, 1000); // 每隔1秒执行foo函数
</script>
